<template>
    <div class="template-invoke-header">
        <div class="title">{{ $t('message.text.documentGeneration') }}</div>
        <div class="button bule-button-1" @click="openSelectFile">
            {{ savePathObj.savePathId ? savePathObj.savePathName : $t('message.text.pleaseStorageLocation') }}</div>
    </div>
    <div class="invoke-item-title">
        <div class="title">
            <svg>
                <use xlink:href="#keowledge-rongqi"></use>
            </svg>
            <span>{{ $t('message.text.basicInfo') }}</span>
        </div>
    </div>
    <div class="invoke-base-info">
        <div class="base-info-item">
            <div class="title">{{ $t('message.text.interfaceAddress') }}</div>
            <div class="info">/mgr/document/template/replace/generate</div>
        </div>
        <div class="base-info-item">
            <div class="title">{{ $t('message.text.requestMethod') }}</div>
            <div class="info">POST</div>
        </div>
        <div class="base-info-item">
            <div class="title">{{ $t('message.text.requestExample') }}</div>
            <div class="info" v-html="exampleJSON"></div>
        </div>
    </div>
    <div class="invoke-item-title">
        <div class="title">
            <svg>
                <use xlink:href="#keowledge-rongqi"></use>
            </svg>
            <span>{{ $t('message.text.paramsInterpretation') }}</span>
        </div>
    </div>
    <div class="parameter-box">
        <div class="parameter-item parameter-title">
            <div class="param-name">{{ $t('message.text.params') }}</div>
            <div class="param-type">{{ $t('message.text.dataType') }}</div>
            <div class="param-sourc">{{ $t('message.text.dataSource') }}</div>
            <div class="param-req">{{ $t('message.text.required') }}</div>
            <div class="param-desc">{{ $t('message.text.paramsDesc') }}</div>
        </div>
        <div class="parameter-item">
            <div class="param-name">
                <svg @click="changeOpen">
                    <use v-bind:xlink:href="`#${openData ? 'keowledge-xiala-zhankai' : 'keowledge-xiala-shouqi'}`"></use>
                </svg>
                <span>
                    {{ $t('message.text.data') }}
                </span>
            </div>
            <div class="param-type">{{ $t('message.text.array') }}</div>
            <div class="param-sourc"></div>
            <div class="param-req">{{ $t('message.text.false') }}</div>
            <div class="param-desc">{{ $t('message.text.varObject') }}</div>
        </div>
        <div class="parameter-second-box" v-if="openData">
            <div class="parameter-item">
                <div class="param-name">{{ $t('message.text.name') }}</div>
                <div class="param-type">{{ $t('message.text.string') }}</div>
                <div class="param-sourc">{{ $t('message.text.systemDefault') }}</div>
                <div class="param-req">{{ $t('message.text.false') }}</div>
                <div class="param-desc">{{ $t('message.text.variable') }}</div>
            </div>
            <div class="parameter-item">
                <div class="param-name">{{ $t('message.text.other') }}</div>
                <div class="param-type">{{ $t('message.text.string') }}</div>
                <div class="param-sourc">{{ $t('message.text.userInput') }}</div>
                <div class="param-req">{{ $t('message.text.false') }}</div>
                <el-tooltip :content="$t('message.text.otherParams')" effect="light">
                    <div class="param-desc">{{ $t('message.text.otherParams') }}</div>
                </el-tooltip>
            </div>
            <div class="parameter-item">
                <div class="param-name">{{ $t('message.text.value') }}</div>
                <div class="param-type">{{ $t('message.text.string') }}</div>
                <div class="param-sourc">{{ $t('message.text.userInput') }}</div>
                <div class="param-req">{{ $t('message.text.false') }}</div>
                <div class="param-desc">{{ $t('message.text.variableValue') }}</div>
            </div>
            <div class="parameter-item">
                <div class="param-name">{{ $t('message.text.variableType') }}</div>
                <div class="param-type">{{ $t('message.text.string') }}</div>
                <div class="param-sourc">{{ $t('message.text.systemDefault') }}</div>
                <div class="param-req">{{ $t('message.text.false') }}</div>
                <el-tooltip :content="$t('message.text.variableTypes')" effect="light">
                    <div class="param-desc">{{ $t('message.text.variableTypes') }}</div>
                </el-tooltip>
            </div>
        </div>
        <div class="parameter-item">
            <div class="param-name">{{ $t('message.text.dcId') }}</div>
            <div class="param-type">{{ $t('message.text.string') }}</div>
            <div class="param-sourc">{{ $t('message.text.systemDefault') }}</div>
            <div class="param-req">{{ $t('message.text.true') }}</div>
            <div class="param-desc">{{ $t('message.text.templateId') }}</div>
        </div>
        <div class="parameter-item">
            <div class="param-name">{{ $t('message.text.savePathId') }}</div>
            <div class="param-type">{{ $t('message.text.string') }}</div>
            <div class="param-sourc">{{ $t('message.text.systemDefault') }}</div>
            <div class="param-req">{{ $t('message.text.true') }}</div>
            <el-tooltip :content="$t('message.text.saveParent')" effect="light">
                <div class="param-desc">{{ $t('message.text.saveParent') }}</div>
            </el-tooltip>
        </div>
    </div>
    <div class="invoke-item-title">
        <div class="title">
            <svg>
                <use xlink:href="#keowledge-rongqi"></use>
            </svg>
            <span>{{ $t('message.text.jsonExample') }}</span>
        </div>
        <div>
            <el-button @click="handleCopy('params')">{{ $t('message.buttons.copyParams') }}</el-button>
            <el-button @click="handleCopy('auth')">{{ $t('message.buttons.copyVoucher') }}</el-button>
        </div>
    </div>
    <div class="json-example-box">
        <div id="monaco-editor" ref="monacoEditor"></div>
    </div>
</template>
<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    nextTick,
    getCurrentInstance
} from 'vue'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import JSONWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import * as monaco from 'monaco-editor'
import { getAllVariable } from '@/api/template'
import { copyText } from '@/utils/util'
import { useRouter } from "vue-router"
import useUserInfoStore from '@/store/userInfo'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const router = useRouter();
const userStore = useUserInfoStore()
const emit = defineEmits(["openSelectSavePath"])
const props = defineProps({
    id: {
        type: String,
        default: ''
    },
    savePathObj: {
        type: Object,
        default: () => {
            return {
                savePathId: '',
                savePathName: ''
            }
        }
    },
})
const { proxy } = getCurrentInstance()
const openData = ref(false)
const monacoEditor = ref()
const editor = ref<any>(null)
const variaList = ref([])
const jsonStr = ref('')
const defaultStr = ``
const exampleJSON = ref(``)
const copyVariaList = ref([])
self.MonacoEnvironment = {
    getWorker(_: string, label: string) {
        if (label === 'json')
            return new JSONWorker()
        return new EditorWorker()
    },
}
watch(() => props.savePathObj, (newV, oldV) => {
    if (newV.savePathId) {
        let json = {
            data: copyVariaList.value,
            dcId: props.id || "",
            savePathId: newV.savePathId || ""
        }
        exampleJSON.value = defaultStr + `'${JSON.stringify(json)}'`
        jsonStr.value = JSON.stringify((json), null, '\t')
        console.log(jsonStr.value)
        if (editor.value) {
            console.log(editor.value)
        }
        // editor.value.setValue(jsonStr.value)
    }
}, { deep: true })
onMounted(() => {
    init()
})
function init() {
    getAllVariable({ templateId: props.id }, false).then(res => {
        if (res.data.code == 0) {
            variaList.value = JSON.parse(JSON.stringify(res.data.data[0]?.variableList || []))
            variaList.value.forEach((item, index) => {
                if (!item.type) {
                    item.type = 'STRING'
                }
                copyVariaList.value.push({
                    other: '',
                    value: '',
                    name: item.name,
                    variableType: item.type
                })
            })
            let json = {
                data: copyVariaList.value,
                dcId: props.id || "",
                savePathId: props.savePathObj.savePathId || ""
            }
            exampleJSON.value = defaultStr + `'${JSON.stringify(json)}'`
            jsonStr.value = JSON.stringify((json), null, '\t')
            // jsonStr.value = JSON.stringify((json))
            nextTick(() => {
                editor.value = monaco.editor.create(monacoEditor.value, {
                    value: jsonStr.value, // 编辑器初始显示文字
                    theme: 'CodeSampleTheme', // 官方自带三种主题vs, hc-black, or vs-dark
                    language: 'json', // 语言支持自行查阅demo
                    overviewRulerBorder: false, // 滚动是否有边框
                    automaticLayout: true, // 自动布局
                    readOnly: true, // 是否只读
                    minimap: { // 关闭代码缩略图
                        enabled: false // 是否启用预览图
                    },
                    folding: false, // 是否启用代码折叠
                    lineNumbers: 'on', // 控制行号的显隐
                    scrollBeyondLastLine: false, // 禁用额外滚动区
                    scrollbar: {
                        verticalScrollbarSize: 4, // 垂直滚动条宽度，默认px
                        horizontalScrollbarSize: 4 // 水平滚动条高度
                    },
                    contextmenu: false // 禁用右键菜单
                })
            })
        }
    })
}
function changeOpen() {
    openData.value = !openData.value
}
function handleCopy(type) {
    let str = ''
    switch (type) {
        case 'params':
            str = jsonStr.value
            break;
        case 'auth':
            str = 'Bearer ' + userStore.access_token
            break;
        default:
            break;
    }
    copyText(str, () => {
        proxy.$notify({
            title: $t('message.message.copySuccess'),
            type: 'success',
            position: 'bottom-right'
        });
    })
}
function openSelectFile() {
    emit('openSelectSavePath')
}
</script>
<style lang="scss" scoped>
.template-invoke-header {
    background-color: #fff;
    z-index: 3;
    position: sticky;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 24px 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EEEFF0;

    .title {
        font-size: 16px;
        @include SourceHanSansCN-Bold;
        color: #363b4c;
    }

    .button {
        height: 32px;
        border-radius: 4px;
        padding: 0px 16px;
        line-height: 32px;
        cursor: pointer;
    }
}

.invoke-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 24px;
    margin-bottom: 8px;

    .knowledge-iconfont {
        color: #6F7588;
    }

    .title {
        display: flex;
        align-items: center;

        svg {
            width: 16px;
            height: 16px;
            margin-right: 8px;
        }

        span {
            font-size: 16px;
            color: #363b4c;
        }
    }
}

.invoke-base-info {
    margin: 0px 24px 24px;
    border-radius: 4px;
    border: 1px solid #EEEFF0;

    .base-info-item {
        // display: flex;
        // align-items: center;
        display: grid;
        grid-template-columns: 144px 1fr;

        .title {
            min-height: 51px;
            background: #F5F6F7;
            padding: 16px 24px;
            box-sizing: border-box;
            color: #363B4C;
            width: 144px;
            user-select: none;
        }

        .info {
            word-break: break-all;
            padding: 16px 24px;
            min-height: 51px;
            box-sizing: border-box;
            color: #363B4C;
            border-left: 1px solid #EEEFF0;
        }
    }

    .base-info-item+.base-info-item {
        border-top: 1px solid #EEEFF0;
    }
}

.parameter-box {
    padding: 0px 24px;
    margin: 0px 0px 24px;

    .parameter-title {
        background: #F5F6F7;
        border-radius: 4px;
        height: 40px !important;
        line-height: 40px !important;
        border-bottom: none !important;

        div {
            color: #363B4C;
            @include SourceHanSansCN-Bold;
        }
    }

    .parameter-item {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: 50px;
        align-items: center;
        padding: 0px 16px;
        border-bottom: 1px solid #EEEFF0;

        .param-name,
        .param-type,
        .param-sourc,
        .param-req,
        .param-desc {
            color: #363B4C;
        }

        .param-name {
            display: flex;
            align-items: center;
            position: relative;

            svg {
                position: absolute;
                width: 16px;
                height: 16px;
                cursor: pointer;
                left: -16px;
            }
        }

        .param-desc {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .parameter-second-box {
        .parameter-item {
            padding: 0px 16px 0px 24px;
        }
    }
}

.json-example-box {
    margin-bottom: 24px;
    padding: 0px 24px;
    height: 397px;

    #monaco-editor {
        border: 1px solid #EEEFF0;
        border-radius: 4px;
        overflow: hidden;
        height: 397px;
    }
}
</style>